import { FC, useState, useEffect } from 'react';
import { Space, Card, Table, Tag, Button } from 'antd';

// 解构Editor组件
import { Editor } from 'react-draft-wysiwyg';
// 对应的组件的css
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
// 提供组件的状态
import { EditorState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';

const Index: FC = () => {
  // state = {
  //   editorState: EditorState.createEmpty(),
  // }
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  // onEditorStateChange: Function = (editorState) => {
  //   this.setState({
  //     editorState,
  //   });
  // };
  const onEditorStateChange = (editorState: any) => {
    setEditorState(editorState);
  };
  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="富文本框">
        <Editor
          editorState={editorState}
          toolbarClassName="toolbarClassName"
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          onEditorStateChange={onEditorStateChange}
        />

        <textarea
          disabled
          value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
          style={{
            width: '100%',
            height: 300,
          }}
        />
      </Card>
    </Space>
  );
};

export default Index;
